<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
  <todo>
  <todo-title slot="todo-title" title="myslot"></todo-title>
  <todo-items slot="todo-items" v-for="item in todoItems"
              v-bind:item="item"></todo-items>
</todo>
</div>

<script type="text/javascript">
  // 定义一个待办事项的组件
/*  Vue.component('todo', {
    template: '<div>\
<div>待办事项</div>\
<ul>\
<li>吃饭</li>\
</ul>\
</div>'
  });*/
  Vue.component('todo', {
    template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
  });
  Vue.component('todo-title', {
    props: ['title'],
    template: '<div>{{title}}</div>'
  });

  Vue.component('todo-items', {
    props: ['item'],
    template: '<li>{{item}}</li>'
  });
  new Vue({
    el: '#app',
    data: {
      todoItems: ['吃饭', '睡觉', '学习']
    }
  })
</script>
</body>
</html>